<template>
  <a-modal
    title="违规详情"
    :width="670"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <div class="result-wrap">
        <div class="identify-item">
          <div class="left-cnt" v-if="model">
            <img :src="webUrl + model.imagebase64" alt="">
            <div class="mark" v-for="(postion, idx) in model.result.results" :key="idx" :style="'left:' + (parseInt(postion.location.left) + 3) + 'px;top:' + (parseInt(postion.location.top)+ 5) + 'px;' ">{{ idx + 1 }}</div>
          </div>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'

// 表单字段
const fields = ['id']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    },
    userList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      form: this.$form.createForm(this),
      webUrl: 'http://localhost:8000/upload/'
    }
  },
  created () {
    console.log('custom modal created')

    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', (model) => {
      // eslint-disable-next-line no-eval
      model.result = eval('(' + model.result + ')')
      return model
    })
  }
}
</script>
<style lang="less" scoped>

.result-wrap {
  .identify-item {
    width: 100%;
    padding-top: 10px;
    .left-cnt {
      width: 100%;
      position: relative;

      .mark {
        position: absolute;
        color: red;
        font-size: 15px;
        font-weight: 700;
      }
    }
  }
}

</style>